<script>
  /*
  * @Author: wzh 
  * @Date: 2021-06-03 21:06:26
  * @Last Modified by: 1521620993@qq.com
  * @Last Modified time: 2021-06-03 21:06:26
  */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-酷炫的键盘打字小游戏</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="keyboard">
    <ul class="row">
      <li class="little" id="esc">ESC</li>
      <li class="little" id="1">1</li>
      <li class="ring" id="2">2</li>
      <li class="middle" id="3">3</li>
      <li class="forefinger1st" id="4">4</li>
      <li class="forefinger2nd" id="5">5</li>
      <li class="forefinger2nd" id="6">6</li>
      <li class="forefinger1st" id="7">7</li>
      <li class="middle" id="8">8</li>
      <li class="ring" id="9">9</li>
      <li class="little" id="0">0</li>
      <li class="little">-</li>
      <li class="little">+</li>
      <li class="little" id="back">BACK</li>
    </ul>
    <ul class="row">
      <li class="little" id="tab">TAB</li>
      <li class="little" id="Q">Q</li>
      <li class="ring" id="W">W</li>
      <li class="middle" id="E">E</li>
      <li class="forefinger1st" id="R">R</li>
      <li class="forefinger2nd" id="T">T</li>
      <li class="forefinger2nd" id="Y">Y</li>
      <li class="forefinger1st" id="U">U</li>
      <li class="middle" id="I">I</li>
      <li class="ring" id="O">O</li>
      <li class="little" id="P">P</li>
      <li class="little">[</li>
      <li class="little">]</li>
      <li class="little">\</li>
    </ul>
    <ul class="row">
      <li class="little" id="caps">CAPS</li>
      <li class="little" id="A">A</li>
      <li class="ring" id="S">S</li>
      <li class="middle" id="D">D</li>
      <li class="forefinger1st" id="F">F</li>
      <li class="forefinger2nd" id="G">G</li>
      <li class="forefinger2nd" id="H">H</li>
      <li class="forefinger1st" id="J">J</li>
      <li class="middle" id="K">K</li>
      <li class="ring" id="L">L</li>
      <li class="little">:</li>
      <li class="little">''</li>
      <li class="little" id="enter">ENTER</li>
    </ul>
    <ul class="row">
      <li class="little" id="leftShift">SHIFT</li>
      <li class="little" id="Z">Z</li>
      <li class="ring" id="X">X</li>
      <li class="middle" id="C">C</li>
      <li class="forefinger1st" id="V">V</li>
      <li class="forefinger2nd" id="B">B</li>
      <li class="forefinger2nd" id="N">N</li>
      <li class="forefinger1st" id="M">M</li>
      <li class="middle">,</li>
      <li class="ring">.</li>
      <li class="little">;</li>
      <li class="little" id="rightShift">SHIFT</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>